<!-- 我的路线 -->

<template>
  <div class="PatrolPlan-MyLine TaskTemplate-TemplateProcess">
    <FormSlot label="巡更路线" bind="content" tip="请选择巡更路线" required>
      <BtnPrimary v-show="!isShow" title="选择" @click="point_openEdit()" />
    </FormSlot>

    <div class="flexCC alignCenter">
      <div class="flex1"><b>序号</b></div>
      <div class="flex5"><b>巡更点</b></div>
      <div class="flex3">
        <b>间隔分钟数</b>
        <FormSwitch bind="linkAll" :switchWidth="64" text="联动" :labelWidth="10" noMargin auto />
      </div>
      <div class="flex1 alignCenter">
        <!-- <BtnText v-if="!isShow" title="选择" @click="point_openEdit" /> -->
      </div>
    </div>

    <div v-if="CORE.isEmpty(one.content)" class="TaskTemplate-TemplateProcess-list">
      <div class="flexCC alignCenter">
        <FormSlot noLabel flex1 disabled />
        <FormSlot noLabel flex5 disabled />
        <FormNum bind="minutes" :min="1" rightBtn noLabel noMargin flex3 disabled />
        <div class="flex1" />
      </div>
    </div>

    <draggable v-model="one.content" class="TaskTemplate-TemplateProcess-list" :animation="200" :disabled="isShow">
      <div v-for="(item, i) in one.content" :key="item.id" class="flexCC alignCenter">
        <FormSlot noLabel flex1>{{ i + 1 }}</FormSlot>
        <FormSlot noLabel flex5>{{ item.pointName }}</FormSlot>
        <FormNum
          :one="item"
          bind="minutes"
          :min="1"
          initMin
          rightBtn
          noLabel
          noMargin
          flex3
          @change="changeMinute(item)"
        />
        <div class="flex1">
          <BtnText v-if="!isShow" title="删除" red @click="toDel(i)" />
        </div>
      </div>
    </draggable>

    <!-- <WebTable :list="one.content" noPage>
      <RowText label="序号" bind="sort" :width="120" />
      <RowText label="巡更点" bind="pointName" :minWidth="150" />
      <RowSlot>
        <template #label>
          <span>打卡间隔</span>
          <FormSwitch bind="linkAll" :switchWidth="64" text="联动" noLabel noMargin auto />
        </template>
        <template #default="{ row }">
          <FormNum
            :one="row"
            bind="minutes"
            :min="1"
            initMin
            suffix="分钟"
            rightBtn
            noLabel
            noMargin
            @change="changeMinute(row)"
          />
        </template>
      </RowSlot>
      <RowOperate :btns="['edit', 'del']" edit="同步所有" :width="200" :onEdit="toSyncAll" :onDel="toDel" />
    </WebTable> -->
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyLine',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('point', 'point_')],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换分钟
     */
    changeMinute(row) {
      row.intervalTime = row.minutes * 60000
      if (this.one.linkAll === 1) this.toSyncAll(row)
    },

    /**
     * 同步所有
     */
    toSyncAll({ minutes, intervalTime }) {
      this.one.content.forEach((item) => Object.assign(item, { minutes, intervalTime }))
    },

    /**
     * 删除该行
     */
    toDel(index) {
      this.one.content.splice(index, 1)
    },
  },
}
</script>

<style lang="scss">
@import '@admin/views/Maintain/Task/TaskTemplate/MyModal/TemplateProcess/index.scss';
@import './index.scss';
</style>
